<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>商品列表页面 - 商城</title>
		<meta charset="utf-8">
		<%@ include file="/common/include/title.jsp"%>
	</head>
	<body>
		<%-- <%@ include file="/common/include/header.jsp"%> --%>
		<%-- 如果包含的页面中数据是活的,需要访问Contrller查询数据库只能使用动态包含 --%>
		<!-- 动态包含可以带参数?相当于?后面的内容
				header.html?cateIdTemp=${requestScope.cateId}
			 -->
		<jsp:include page="/header.html">
			<jsp:param value="${requestScope.cateId}" name="cateIdTemp"/>
		</jsp:include>
		<div id="mainBody">
			<div class="container">
				<div class="row">
					<!-- Sidebar ================================================== -->
					<div id="sidebar" class="span3">
						<div class="well well-small">
							<a id="myCart" href="product_summary.html"><img
								src="themes/images/ico-cart.png" alt="cart">3 Items in your
								cart <span class="badge badge-warning pull-right">$155.00</span></a>
						</div>
						<ul id="sideManu" class="nav nav-tabs nav-stacked">
							<li class="subMenu open"><a> ELECTRONICS [230]</a>
								<ul>
									<li><a class="active" href="products.html"><i
											class="icon-chevron-right"></i>Cameras (100) </a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Computers, Tablets & laptop
											(30)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Mobile Phone (80)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Sound & Vision (15)</a></li>
								</ul></li>
							<li class="subMenu"><a> CLOTHES [840] </a>
								<ul style="display: none">
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Clothing (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Shoes (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Women's Hand Bags (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Men's Clothings (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Men's Shoes (6)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Kids Clothing (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Kids Shoes (3)</a></li>
								</ul></li>
							<li class="subMenu"><a>FOOD AND BEVERAGES [1000]</a>
								<ul style="display: none">
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Angoves (35)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Bouchard Aine & Fils (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>French Rabbit (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Louis Bernard (45)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>BIB Wine (Bag in Box) (8)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Other Liquors & Wine (5)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Garden (3)</a></li>
									<li><a href="products.html"><i
											class="icon-chevron-right"></i>Khao Shong (11)</a></li>
								</ul></li>
							<li><a href="products.html">HEALTH & BEAUTY [18]</a></li>
							<li><a href="products.html">SPORTS & LEISURE [58]</a></li>
							<li><a href="products.html">BOOKS & ENTERTAINMENTS [14]</a></li>
						</ul>
						<br />
						<div class="thumbnail">
							<img src="themes/images/products/panasonic.jpg"
								alt="Bootshop panasonoc New camera" />
							<div class="caption">
								<h5>Panasonic</h5>
								<h4 style="text-align: center">
									<a class="btn" href="product_details.html"> <i
										class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i
										class="icon-shopping-cart"></i></a> <a class="btn btn-primary"
										href="#">$222.00</a>
								</h4>
							</div>
						</div>
						<br />
						<div class="thumbnail">
							<img src="themes/images/products/kindle.png"
								title="Bootshop New Kindel" alt="Bootshop Kindel">
							<div class="caption">
								<h5>Kindle</h5>
								<h4 style="text-align: center">
									<a class="btn" href="product_details.html"> <i
										class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i
										class="icon-shopping-cart"></i></a> <a class="btn btn-primary"
										href="#">$222.00</a>
								</h4>
							</div>
						</div>
						<br />
						<div class="thumbnail">
							<img src="themes/images/payment_methods.png"
								title="Bootshop Payment Methods" alt="Payments Methods">
							<div class="caption">
								<h5>Payment Methods</h5>
							</div>
						</div>
					</div>
					<!-- Sidebar end=============================================== -->
					<div class="span9">
						<ul class="breadcrumb">
							<li>
								<a href="${rootPath }/main.html">首页</a>
								<span class="divider">/</span>
							</li>
							<li class="active">商品列表页面</li>
						</ul>
						<h3>
							商品列表页面 
								<small class="pull-right"> 
								共${requestScope.pageInfoUtil.totalRecord }件商品
							</small>
						</h3>
						<hr class="soft" />
						<p>我们是最牛的</p>
						<hr class="soft" />
						<form class="form-horizontal span6">
							<div class="control-group">
								<label class="control-label alignL">排序</label> <select>
									<option>销售量</option>
									<option>价格</option>
									<option>人气</option>
								</select>
							</div>
						</form>
	
						<div id="myTab" class="pull-right">
							<a href="#listView" data-toggle="tab"><span
								class="btn btn-large"><i class="icon-list"></i></span></a> <a
								href="#blockView" data-toggle="tab"><span
								class="btn btn-large btn-primary"><i class="icon-th-large"></i></span></a>
						</div>
						<br class="clr" />
						<div class="tab-content">
							<div class="tab-pane" id="listView">
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/3.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
	
										</form>
									</div>
								</div>
								<hr class="soft" />
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/1.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
	
										</form>
									</div>
								</div>
								<hr class="soft" />
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/3.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
	
										</form>
									</div>
								</div>
								<hr class="soft" />
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/3.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
	
										</form>
									</div>
								</div>
	
								<hr class="soft" />
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/3.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
										</form>
									</div>
								</div>
								<hr class="soft" />
								<div class="row">
									<div class="span2">
										<img src="themes/images/products/3.jpg" alt="" />
									</div>
									<div class="span4">
										<h3>New | Available</h3>
										<hr class="soft" />
										<h5>Product Name</h5>
										<p>Nowadays the lingerie industry is one of the most
											successful business spheres.We always stay in touch with the
											latest fashion tendencies - that is why our goods are so
											popular..</p>
										<a class="btn btn-small pull-right" href="product_details.html">View
											Details</a> <br class="clr" />
									</div>
									<div class="span3 alignR">
										<form class="form-horizontal qtyFrm">
											<h3>$140.00</h3>
											<label class="checkbox"> <input type="checkbox">
												Adds product to compair
											</label><br /> <a href="product_details.html"
												class="btn btn-large btn-primary"> Add to <i
												class=" icon-shopping-cart"></i></a> <a
												href="product_details.html" class="btn btn-large"><i
												class="icon-zoom-in"></i></a>
	
										</form>
									</div>
								</div>
								<hr class="soft" />
							</div>
	
							<div class="tab-pane  active" id="blockView">
								<ul class="thumbnails">
									<c:forEach items="${requestScope.goodsList }" var="goods" varStatus="stat">
										<li class="span3">
											<div class="thumbnail">
												<a href="${rootPath }/goods/${goods.url}.html" target="_blank">
													<c:choose>
														<c:when test="${goods.listImgPath != null && goods.listImgPath!= ''}">
															<img title="${goods.name }" src="${goods.listImgPath}" alt=""  height="160" width="160"/>
														</c:when>
														<c:otherwise>
															<img title="${goods.name }" src="${rootPath }/imgs/no_pic.gif" alt="" height="160" width="160"/>
														</c:otherwise>
													</c:choose>
												</a>
												<div class="caption">
													<h5 title="${goods.name }">
														<a href="${rootPath }/goods/${goods.url}.html" target="_blank">
															${fn:substring(goods.name,0,15) }
														</a>
													</h5>
													<p><del>Y${goods.marketPrice}</del></p>
													<h4 style="text-align: center">
														<a class="btn" href="${rootPath }/goods/${goods.url}.html" target="_blank">
															<i class="icon-zoom-in"></i>
														</a>
														<a class="btn" href="#">
															Add to <i class="icon-shopping-cart"></i>
														</a>
														<a class="btn btn-primary">
															Y${goods.price}
														</a>
													</h4>
												</div>
											</div>
										</li>
									</c:forEach>
								</ul>
								<hr class="soft" />
							</div>
						</div>
	
						<a href="compair.html" class="btn btn-large pull-right">Compair
							Product</a>
						<div class="pagination">
							<%--
								分页期望的效果
								~如果总页数小于10,显示为;1 2 3 4 5 6 7 8 9 10 ;
								~如果总页数大于10之间;
									如果当前页在1-->10之间;前面显示1--10 .. 总页数
									如果当前页在总页数-10之前;显示为:1 ...总页数-10 总页数-9 总页数
									如果当前页在大于10并且小于总页数-10;显示为:1 ... 15 16 17 18  ...总页数(当前页是16)
								根据需要先用java写出来,然后再用jstl写出来
							 --%>
							<ul>
								<li><a href="${rootPath }/goods_${requestScope.cateId}_${requestScope.pageInfoUtil.prePage }.html?keyword=${requestScope.keyword}">&lsaquo;</a></li>
								<li><a href="${rootPath }/goods_${requestScope.cateId}_1.html?keyword=${requestScope.keyword}">1</a></li>
								<!-- 分页最多显示多少个 -->
								<%--
									PageInfoUtil pageInfoUtil = new PageInfoUtil();
									pageInfoUtil.setCurrentPage(108);
									pageInfoUtil.setPageSize(10);
									pageInfoUtil.setTotalRecord(1110);
									request.setAttribute("pageInfoUtil", pageInfoUtil);
								--%>
								<c:set value="10" var="tempPage"/>
								<!-- 当前页如果为第一20页,显示的时候就是20-3 和 20 + 3 -->
								<c:set value="3" var="tempStep"/>
								<c:choose>
									<c:when test="${requestScope.pageInfoUtil.totalPage <= tempPage }">
										<!-- 总页数小于10 -->
										<c:forEach begin="2" end="${requestScope.pageInfoUtil.totalPage -1 }" step="1" var="pages">
											<li><a href="${rootPath }/goods_${requestScope.cateId}_${pages}.html?keyword=${requestScope.keyword}">${pages }</a></li>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<c:choose>
											<c:when test="${requestScope.pageInfoUtil.currentPage <= tempPage }">
												<!-- 当前页小于10 -->
												<c:forEach begin="2" end="${tempPage}" step="1" var="pages">
													<li><a href="${rootPath }/goods_${requestScope.cateId}_${pages}.html?keyword=${requestScope.keyword}">${pages }</a></li>
												</c:forEach>
												<li><a href="#">...</a></li>
											</c:when>
											<c:when test="${requestScope.pageInfoUtil.currentPage > tempPage && requestScope.pageInfoUtil.currentPage < requestScope.pageInfoUtil.totalPage - tempPage }">
												<!-- 当前页大于10,并且小于总页数-10 -->
												<li><a href="#">...</a></li>
												<c:forEach begin="${requestScope.pageInfoUtil.currentPage -tempStep }" end="${requestScope.pageInfoUtil.currentPage + tempStep }" step="1" var="pages">
													<li><a href="${rootPath }/goods_${requestScope.cateId}_${pages}.html?keyword=${requestScope.keyword}">${pages }</a></li>
												</c:forEach>
												<li><a href="#">...</a></li>
											</c:when>
											<c:otherwise>
												<!-- 当前页在最后的10页中 -->
												<li><a href="#">...</a></li>
												<c:forEach begin="${requestScope.pageInfoUtil.currentPage - tempStep}" end="${requestScope.pageInfoUtil.totalPage -1 }" step="1" var="pages">
													<li><a href="${rootPath }/goods_${requestScope.cateId}_${pages}.html?keyword=${requestScope.keyword}">${pages }</a></li>
												</c:forEach>
											</c:otherwise>
										</c:choose>
									</c:otherwise>
								</c:choose>
								<!-- <li><a href="#">...</a></li>
								<li><a href="#">14</a></li>
								<li><a href="#">15</a></li>
								<li><a href="#">16</a></li>
								<li><a href="#">17</a></li>
								<li><a href="#">...</a></li> -->
								<li><a href="${rootPath }/goods_${requestScope.cateId}_${requestScope.pageInfoUtil.totalPage }.html?keyword=${requestScope.keyword}">${requestScope.pageInfoUtil.totalPage }</a></li>
								<li><a href="${rootPath }/goods_${requestScope.cateId}_${requestScope.pageInfoUtil.nextPage }.html?keyword=${requestScope.keyword}">&rsaquo;</a></li>
							</ul>
						</div>
						<br class="clr" />
					</div>
				</div>
			</div>
		</div>
		<!-- MainBody End ============================= -->
		<%@ include file="/common/include/footer.jsp"%>
	</body>
</html>